<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../utils/layui/css/layui.css">
    <link rel="stylesheet" href="../style/home.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">华联后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--<ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" class="userName">

                </a>
            </li>
            <li class="layui-nav-item"><a class="exit" href="javascript:;"><i style="color: red; font-size: 20px" class="layui-icon layui-icon-logout"></i></a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-shrink="all"  lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">会员管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="home.html">会员列表</a></dd>
                        <dd><a href="membershipCoupon.html">会员优惠券</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">优惠券管理</a>
                    <dl class="layui-nav-child">
                        <dd><a style="color: #fff"  href="coupon.html">优惠券列表</a></dd>
                        <dd><a href="exchange.html">优惠券兑换清单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="clerk.html">核销人员管理</a></li>

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-inline searchBox">
                <!--<div class="layui-input-inline">
                    <label class="layui-form-label">会员搜索</label>
                </div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="昵称/手机号码"  class="layui-input searchInp">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal searchBtn">搜索</button>-->
                <button type="button" class="layui-btn layui-btn-normal addBoxBtn">新增</button>

                <button type="button" class="layui-btn daochu">导出</button>
                </div>
            </div>
            <div>
                <table class="layui-table">
                    <colgroup>
                        <col width="40">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>优惠券名称</th>
                            <th>使用条件</th>
                            <th>申请有效时间</th>
                            <th>使用有效时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody class="tab">

                    </tbody>
                </table>
            </div>
            <div id="page">

            </div>
        </div>
    </div>
</div>

<div id="addBox">
    <form class="layui-form" action="">
        <div class="addBoxCon">
            <div class="addBoxLeft">
                优惠券名称:
                <input type="text" class="layui-input inputName" placeholder="优惠券名称">
                使用条件：
                <input type="text" class="layui-input inputTianjian" placeholder="使用条件">
                领取有效时间(yyyy-MM-dd hh:mm:ss):
                <input type="text" class="layui-input inputYouXiao" >
                使用有效时间(yyyy-MM-dd hh:mm:ss):
                <input type="text" class="layui-input inputShiYong" >
            </div>
            <div class="addBoxRight">
                <img width="300" class="uploadImg" src="../images/imgbg.png" alt="">
                <button type="button" class="layui-btn" id="updataBtn">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div id="editor" style="width: 700px;margin-top: 20px">
            <p>请编辑描述文字</p>
        </div>
    </form>
</div>
<div id="xiangqingbox">
    <form class="layui-form" action="">
        <div class="addBoxCon">
            <div class="addBoxLeft">
                优惠券名称:
                <input disabled type="text" class="layui-input inputName" >
                使用条件：
                <input disabled type="text" class="layui-input inputTianjian" >
                领取有效时间:
                <input disabled type="text" class="layui-input inputYouXiao" >
                使用有效时间:
                <input disabled type="text" class="layui-input inputShiYong">
            </div>
            <div class="addBoxRight">
                <img width="300" class="uploadImg" src="../images/imgbg.png" alt="">
            </div>
        </div>
        <div id="editor1" style="width: 660px;margin-top: 20px;border: 1px solid #eee;padding: 20px">

        </div>
    </form>
</div>
</body>

</html>
<script src="../utils/jquery-3.4.1.min.js"></script>
<script src="../utils/baseUrl.js"></script>
<script src="../utils/layui/layui.js"></script>
<script src="../utils/wangEditor.min.js"></script>
<script>
    $('.userName').html(window.localStorage.getItem('user'));
    $('.exit').click(function () {
        window.localStorage.removeItem('user');
        window.localStorage.removeItem('auth');
        window.location.href='../index.html';
    });

    var page=1;
    var imgSrc='';
    var count=0;

    /*富文本*/
    var E = window.wangEditor;
    var editor = new E('#editor')
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'justify',  // 对齐方式
    ]
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()

    layui.use('element', function(){
        var element = layui.element;
    });

    var laypage;
    layui.use('laypage', function(){
        laypage = layui.laypage;
    });
    /*弹框*/
    layui.use('layer', function(){
        var layer = layui.layer;

        $('.tab').on('click','.xiangqing',function (ev) {
            var obj=$(ev.target).parents('tr')
            layer.open({
                type: 1,
                title:'优惠券详情',
                content: $('#xiangqingbox'),
                area:['800px','500px'],
                offset:'auto',
                success: function(layero, index){
                    console.log(layero, index);
                    $('.inputName').val(obj.find('.dataName').html());
                    $('.inputTianjian').val(obj.find('.dataDesc').html());
                    $('.inputYouXiao').val(obj.find('.collectExpire').html());
                    $('.inputShiYong').val(obj.find('.useExpire').html());
                    $('.uploadImg').attr('src',baseUrl+'/static/images/'+obj.attr('data-img'));
                    $('#editor1').html(obj.find('.datarole').html())
                }
            })
        });

        $('.addBoxBtn').on('click',function () {
            $('.inputName').val('');
            $('.inputTianjian').val('');
            $('.inputYouXiao').val('');
            $('.inputShiYong').val('');
            imgSrc='';
            $('.uploadImg').attr('src','../images/imgbg.png');
            editor.txt.html('<p>请编辑描述文字</p>') //
            layer.open({
                type: 1,
                title:'新增优惠券',
                content: $('#addBox'),
                area:['800px','500px'],
                offset:'auto',
                btn:'新增',
                cancel:function(){
                    $('.inputName').val('');
                    $('.inputTianjian').val('');
                    $('.inputYouXiao').val('');
                    $('.inputShiYong').val('');
                    imgSrc='';
                    $('.uploadImg').attr('src','../images/imgbg.png');
                    editor.txt.html('<p>请编辑描述文字</p>') // 重新设置编辑器内容
                },
                yes:function (index,layero) {
                    if($('.inputName').val().trim()==''){
                        layer.msg('优惠券名称不能为空！');
                        return false;
                    }
                    if($('.inputTianjian').val().trim()==''){
                        layer.msg('使用条件不能为空！');
                        return false;
                    }
                    if($('.inputYouXiao').val().trim()=='undefined:00'){
                        layer.msg('领取有效时间不能为空！');
                        return false;
                    }
                    if($('.inputShiYong').val().trim()=='undefined:00'){
                        layer.msg('使用有效时间不能为空！');
                        return false;
                    }
                    if(imgSrc==''){
                        layer.msg('优惠券背景图不能为空！');
                        return false;
                    }


                    var html=editor.txt.html();
                    /*if(!window.localStorage.getItem('auth')){
                        window.location.href='/';
                        return false;
                    }*/
                    console.log($('.inputYouXiao').val())
                    $.ajax({
                        method:'post',
                        headers:{
                            'auth':window.localStorage.getItem('auth'),
                            'content-type':'application/json'
                        },
                        url:baseUrl+'/cpn/add',
                        data:JSON.stringify({
                            name:$('.inputName').val(),
                            role:html,
                            desc:$('.inputTianjian').val(),
                            img:imgSrc,
                            collectExpire:$('.inputYouXiao').val(),
                            useExpire:$('.inputShiYong').val()
                        }),
                        success:function (res) {
                            console.log(res);
                            if(res.code==1){
                                layer.close(index);
                                $('.inputName').val('');
                                $('.inputTianjian').val('');
                                $('.inputYouXiao').val('');
                                $('.inputShiYong').val('');
                                imgSrc='';
                                $('.uploadImg').attr('src','../images/imgbg.png');
                                editor.txt.html('<p>请编辑描述文字</p>') // 重新设置编辑器内容
                                getCon();
                            }else if(res.code==500){
                                layer.msg('登录信息已经过期');
                                setTimeout(function () {
                                    window.location.href='/';
                                },1000)
                            }
                        }
                    });
                }//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        })

    });

    var form;

    layui.use('form', function(){
        form = layui.form;
    });

    /*上传*/
    layui.use('upload', function(){
        var upload = layui.upload;
        /*if(!window.localStorage.getItem('auth')){
            window.location.href='/';
            return false;
        }*/
        //执行实例
        var uploadInst = upload.render({
            elem: '#updataBtn' //绑定元素
            ,url: baseUrl+'/cpn/upload', //上传接口
            headers:{
                'auth':window.localStorage.getItem('auth')
            }
            ,done: function(res){
                if(res.code==1){
                    imgSrc=res.fileName;
                    $('.uploadImg').attr('src',baseUrl+"/static/images/"+res.fileName);
                }else if(res.code==500){
                    layer.msg('登录信息已经过期');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    /*获取数据*/
    function getCon(){
        /*if(!window.localStorage.getItem('auth')){
            window.location.href='/';
            return false;
        }*/
        $.ajax({
            method:'post',
            headers:{
                'auth':window.localStorage.getItem('auth')
            },
            url:baseUrl+'/cpn/getList',
            data:{
                page:page
            },
            success:function (res) {
                if(res.code==1){
                    $('.tab').html('');
                    count=res.count;
                    for(var i=0;i<res.data.length;i++){

                        $('.tab').append(`
                            <tr data-img="${res.data[i].img}" data-id="${res.data[i].id}">
                                <td class="datarole" style="display: none">${res.data[i].role}</td>
                                <td>${i+1}</td>
                                <td class="dataName">${res.data[i].name}</td>
                                <td class="dataDesc">${res.data[i].desc}</td>
                                <td class="collectExpire">${res.data[i].collectExpire}</td>
                                <td class="useExpire">${res.data[i].useExpire}</td>
                                <td>
                                    <form class="layui-form">
                                        <a href="javascript:;" class="xiangqing">详情</a>
                                        <input class="shangxiajia" ${res.data[i].inUse==true?"checked":""} value="${res.data[i].inUse==true}" type="checkbox" name="zzz" lay-skin="switch" lay-text="上架|下架">
                                    </form>

                                </td>
                            </tr>
                        `)

                    }
                    form.render();
                    if(count>10){
                        laypage.render({
                            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: count //数据总数，从服务端得到
                            ,curr:page
                            ,jump:function (obj,first) {
                                console.log('first',first)
                                if(!first){
                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); //得到每页显示的条数
                                    page=obj.curr;
                                    getCon();
                                }
                            }
                        });
                    }
                }else if(res.code==500){
                    layer.msg('登录信息已经过期');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                }
            }
        });
    }
    /*页面加载后加载数据*/
    $(function () {
        getCon();
    });
    /*上下架*/
    $('.tab').on('click','.layui-form-switch',function (ev) {
        var inUse=$(ev.target).parents('.layui-form').find('.shangxiajia').val();
        var cpId=$(ev.target).parents('tr').attr('data-id');
        /*if(!window.localStorage.getItem('auth')){
            window.location.href='/';
            return false;
        }*/
        $.ajax({
            method:'post',
            url:baseUrl+'/cpn/update',
            headers:{
                'auth':window.localStorage.getItem('auth')
            },
            data:{
                cpId:cpId,
                use:inUse=='true'?0:1
            },
            success:function (res) {
                if(res.code==1){
                    getCon();
                }else if(res.code==500){
                    layer.msg('登录信息已经过期');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                }
            }
        });
    })

    $('.daochu').click(function () {

        let a = document.createElement('a');
        let _fileName = '优惠券清单.xls';
        a.download = _fileName;
        a.href = baseUrl+'/cpn/exportCpnList';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    })
</script>